<template>
    <div class="flex_col_start m5 p10 card">
        <label class="flex_center_self">{{ props.device.name }}</label>
        <div class="flex_row_center mt5">
            <label>MAC地址:</label>
            <label class="ml5">{{ props.device.mac_addr }}</label>
        </div>
        <div class="flex_row_center mt5">
            <el-button @click="onClickDelete" type="warning">删除</el-button>
            <el-button @click="onClickDetail" type="primary">详情</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { TbDevice } from '@/service/device';


interface Props {
    device: TbDevice,
}

const props = defineProps<Props>();

const emit = defineEmits<{
    detail: [],
    delete: [],
}>();

function onClickDetail() {
    emit('detail');
}

function onClickDelete() {
    emit('delete');
}

</script>
